<script setup>
import { onMounted, ref } from 'vue';
import { uniFetch } from '../../../utils/fetch';
	onMounted(()=>{
		console.log(1111);
		getlist()
	})
	const list=ref([]);
	const page=ref(1);
	const size=ref(10);
	const scrolltolower=()=>{
		console.log(123333444);
		getlist()
	}
	const refreshtrigger=ref(true)
	const xlsx=()=>{
		console.log("下拉刷新");
		refreshtrigger.value=true
		list.value=[];
		page.value=1;
		getlist()
		
		console.log(refreshtrigger.value);
	}
	const tihuo=(e)=>{
		uni.navigateTo({
			url:"/subpkg_task/detail/index?id="+e
		})
	}
	const getlist=()=>{
		uniFetch({
			url:"/driver/tasks/list",
			data:{
				page:page.value,
				pageSize:size.value,
				status:6
			}
		}).then(res=>{
			console.log(res,"res");
			if(res.data.data.items !== null){
		list.value=[...list.value,...res.data.data.items]
			page.value+=1;				
			}else{
				// list.value=[...list.value,...[]];
				uni.showToast({
					icon:"none",
					title:"暂无更多数据"
				})	
			}

			refreshtrigger.value=false
		})
	}
	
</script>


<template>
  <view class="task-search">
    <view class="search-bar">
      <text class="iconfont icon-search"></text>
      <input class="input" type="text" placeholder="输入任务编号" />
    </view>
    <view class="filter-bar">
      <picker class="picker" mode="date">2023.05.20</picker>
      <text class="text">至</text>
      <picker class="picker" mode="date">结束时间</picker>
      <button disabled class="button">筛选</button>
    </view>
  </view>
  <scroll-view scroll-y refresher-enabled :refresher-triggered="refreshtrigger" @refresherrefresh="xlsx" class="scroll-view" @scrolltolower="scrolltolower" >
    <view class="scroll-view-wrapper">
      <view v-if="list.length !==0" class="task-card" v-for="(item,index) in list">
        <navigator hover-class="none" :url="`/subpkg_task/detail/index?id=${item.id}`">
          <view class="header">
            <text class="no">任务编号: {{item.transportTaskId}}</text>
          </view>
          <view class="body">
            <view class="timeline">
              <view class="line"
                >{{item.startAddress}}</view
              >
              <view class="line">{{item.endAddress}}</view>
            </view>
          </view>
        </navigator>
        <view class="footer flex">
          <view class="label">提货时间</view>
          <view class="time">{{item.planDepartureTime}}</view>
        </view>
      </view>
      <view class="task-blank" v-else>无完成货物</view>
    </view>
  </scroll-view>
</template>

<style lang="scss" scoped>
  @import './styles.scss';

  .task-search {
    padding: 30rpx;
    // margin-top: -1rpx;
    background-color: #fff;
    border-bottom: 1rpx solid #eee;

    .search-bar {
      position: relative;

      .icon-search {
        position: absolute;
        top: 22rpx;
        left: 24rpx;
        color: $uni-secondary-color;
        font-size: $uni-font-size-small;
      }

      .input {
        height: 72rpx;
        background-color: #f4f4f4;
        border-radius: 72rpx;
        padding-left: 72rpx;
        font-size: $uni-font-size-small;
      }
    }

    .filter-bar {
      display: flex;
      margin-top: 30rpx;
      font-size: $uni-font-size-small;
      text-align: center;
      line-height: 64rpx;
      color: $uni-secondary-color;

      .picker {
        width: 230rpx;
        height: 64rpx;
        border-radius: 64rpx;
        background-color: $uni-bg-color;
      }

      .text {
        margin: 0 24rpx;
      }

      .button {
        width: 120rpx;
        height: 64rpx;
        padding: 0;
        margin-left: 40rpx;
        line-height: 64rpx;
        border-radius: 64rpx;
        font-size: $uni-font-size-small;
        color: #fff;
        background-color: $uni-primary;

        &[disabled] {
          background-color: #fadcd9;
        }
      }
    }
  }
</style>
